<template>
  <div class="sex-ratio">
    <div class="human-list">
      <div :class="['human',{'male':item<=Math.ceil(maleRatio*20)}]" v-for="item in 20" :key="item"></div>
    </div>
    <div class="human-ratio">
      <div class="male" :style="{'width':`${maleRatio*100}%`}">男性：{{maleRatio*100}}%</div>
      <div class="female" :style="{'width':`${femaleRatio*100}%`}">女性：{{femaleRatio*100}}%</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sexRatio",
  props:["data"],
  computed:{
    maleRatio:function(){
      const {male,female} = this.data
      return (male/(male+female)).toFixed(2)
    },
    femaleRatio:function(){
      return (1-this.maleRatio).toFixed(2)
    }
  }
}
</script>

<style lang="scss" scoped>
.sex-ratio{
  width: 100%;
  height: 60px;
  .human-list{
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .human{
      width: 16px;
      height: 30px;
      background: url(../../assets/images/icon-female.png) no-repeat center center / contain;
      &.male{
        background: url(../../assets/images/icon-male.png) no-repeat center center / contain;
      }
    }
  }
  .human-ratio{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    .male{
      height: 100%;
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to top,#4760FF,#0DCCFF);
      -webkit-background-clip:text;
      color: transparent;
    }
    .female{
      height: 100%;
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to top,#F56285,#F089E5);
      -webkit-background-clip:text;
      color: transparent;
    }
  }
}
</style>